<template>
  <div class="all">
      <!-- <el-button @click="addUserByList">添加</el-button> -->
    <div class="container">
      <div class="containerName">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">产品名称</div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">相关人员</div>
          </el-col>

          <el-col :span="10" :offset="6">
            <div class="grid-content bg-purple">
              <DataRefresh class="dataStatisticsButton" />
              <el-button type="primary" @click="reset" class="buttonStyles">重置</el-button>
              <el-select v-model="productvalue" multiple filterable placeholder="请选择产品名称搜索">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-button type="primary" class="buttonStyle" @click="getCategory">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="addData">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="addDataLeft">
                <el-button type="primary" class="buttonStyleMin" @click="clickAddData">添加</el-button>
                <div class="addDataLeftList">
                  <p v-for="(item, index) in ProductListTwo" :key="index">
                    <span>{{ item.name }}</span>
                  </p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="13">
            <div class="grid-content bg-purple">
              <div class="addDataCenter">
                <el-button type="primary" class="buttonStyleMin" @click="ClickAdd">添加</el-button>
                <div class="toplie">
                  <p v-for="(item, index) in UserGetAllUser" :key="index">
                    <span class="name">{{ item.name }}；</span>
                  </p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="onAdd" class="buttonStyle">添加</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="containerButtom">
        <div v-for="(item, index) in ProductSetGetAllList" :key="index" class="containerButtomList">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-input v-model="item.productName" placeholder="请输入内容" disabled></el-input>
              </div>
            </el-col>
            <el-col :span="13">
              <div class="grid-content bg-purple">
                <div class="containerButtomListCenter">
                  <p v-for="(item2, index2) in item.users" :key="index2">
                    <span class="name">{{ item2.name }}；</span>
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-button type="primary" @click.stop="onActionConfirm(item.id, modalType.delete)" class="buttonStyle"
                  >删除</el-button
                >
                <el-button type="primary" @click.stop="toView(index)" class="buttonStyle">查看</el-button>
                <el-button type="primary" @click.stop="clickBian(index)" class="buttonStyle">编辑</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="relevantPersonnelOne"
      @close="cancelOne"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      class="reciverDialog"
    >
      <el-table
        height="360"
        ref="multipleSelectionOne"
        :data="
          userTableData.filter(
            data =>
              !search ||
              data.name.toLowerCase().includes(search.toLowerCase())
                | data.userName.toLowerCase().includes(search.toLowerCase())
          )
        "
        :row-key="row => row.id"
        @selection-change="handleSelectionChangeOne"
        tooltip-effect="dark"
      >
        <el-table-column label="C2表" align="right" label-class-name="searchHead">
          <template slot="header">
            <el-input v-model="search" clearable style="width:220px;" size="mini" placeholder="输入关键字搜索" />
          </template>
          <el-table-column type="selection" :reserve-selection="true"> </el-table-column>
          <el-table-column prop="userName" label="OA号"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="department" label="部门"> </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelOne">取消</el-button>
        <el-button type="primary" @click="confirmOne">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="relevantPersonnelTwo"
      @close="cancelTwo"
      :destroy-on-close="true"
      class="reciverDialog"
      :close-on-click-modal="false"
      width="70%"
    >
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-between">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div>
              <el-tag
                :key="inds"
                v-for="(tag, inds) in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >
                {{ tag.name }}
              </el-tag>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-table
              height="480"
              ref="multipleSelectionTwo"
              :data="
                userTableData.filter(
                  data =>
                    !search ||
                    data.name.toLowerCase().includes(search.toLowerCase())
                      | data.userName.toLowerCase().includes(search.toLowerCase())
                )
              "
              :row-key="row => row.id"
              @selection-change="handleSelectionChangeTwo"
              tooltip-effect="dark"
            >
              <el-table-column label="C2表" align="right" label-class-name="searchHead">
                <template slot="header">
                  <el-input v-model="search" clearable style="width:220px;" size="mini" placeholder="输入关键字搜索" />
                </template>
                <el-table-column type="selection" :reserve-selection="true"> </el-table-column>
                <el-table-column prop="userName" label="OA号"> </el-table-column>
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column prop="department" label="部门"> </el-table-column>
                <el-table-column prop="email" label="邮箱"> </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelTwo">取消</el-button>
        <el-button type="primary" @click="confirmTwo">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="relevantPersonnelThree"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @close="cancelThree"
      class="reciverDialog"
    >
      <el-table
        height="360"
        ref="multipleSelectionThree"
        :data="productList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        :row-key="row => row.id"
        @selection-change="handleSelectionChangeThree"
        tooltip-effect="dark"
      >
        <el-table-column label="C2表" align="right" label-class-name="searchHead">
          <template slot="header">
            <el-input v-model="search" clearable style="width:220px;" size="mini" placeholder="输入关键字搜索" />
          </template>
          <el-table-column type="selection" :reserve-selection="true"> </el-table-column>
          <el-table-column prop="name" label="产品名称"> </el-table-column>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelThree">取消</el-button>
        <el-button type="primary" @click="confirmThree">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="relevantPersonnelFour" :close-on-click-modal="false" class="reciverDialog" width="70%">
      <el-table height="660" ref="multipleSelectionTwo" :data="staffList">
        <el-table-column prop="userName" label="OA号"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="department" label="部门"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
        title="提示"
        :visible.sync="userModelVisible"
        width="30%"
       >
        <el-table
            ref="tableRef"
            style="width:418px"
            border
            max-height="448"
            :data="sliceTable"
            :row-key="row => row.id"
            @select="handleSelect"
            @select-all="handleSelectAll"
        >
          <el-table-column type="selection" width="40"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="age" label="年龄" width="120"></el-table-column>
          <el-table-column prop="address" label="住址"></el-table-column>
        </el-table>
        <span>
            {{selectedRows|filtersTable}}
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="userModelVisible = false">取 消</el-button>
            <el-button type="primary" @click="userModelVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <CommonDialog ref="CommonDialog" />
  </div>
</template>

<script>
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { Product, User } from '@/api/setting/service.js'
import DataRefresh from './dataRefresh.vue'
export default {
    components: {
        CommonDialog,
        DataRefresh
    },
    data() {
        return {
            tableData: [],
            multipleSelection: [],

            // 开始索引
            startIndex: 0,
            // 选中的数据
            selectedRows: [],
            // 空元素，用于撑开table的高度
            vEle: undefined,
            // 是否全选
            isSelectedAll: false,
            userModelVisible: false,
            // 搜索框
            search: '',
            // 新建 人员弹出框
            relevantPersonnelOne: false,
            // 编辑 人员弹出框
            relevantPersonnelTwo: false,
            // 产品列表
            productList: [],
            // 所选的产品名称列表
            productvalue: [],
            // 所有人员信息数据
            UserGetAllUser: [],
            // 异步获取产品设置的所有数据
            ProductSetGetAllList: [],
            // 点击所有数据中的某一条
            Expansion: '',
            // 删除弹出框
            modalType: {
                delete: {
                    type: 'delete',
                    tipInfo: '确定要删除该条数据吗？',
                    btnText: '删除',
                    callBack: 'clickDelete'
                }
            },
            // 人员信息列表
            userTableData: [],
            // 新建 所选人员
            multipleSelectionOneCopy: [],
            // 编辑 所选人员
            multipleSelectionTwoCopy: [],
            // 所选产品
            multipleSelectionThreeCopy: [],
            // 确定产品列表
            ProductListTwo: [],
            // 产品弹出框
            relevantPersonnelThree: false,
            // 查看弹出框
            relevantPersonnelFour: false,
            // 查看人员列表
            staffList: [],
            // 标签列表
            dynamicTags: []
        }
    },
    // 计算属性
    computed: {
    // 这个是截取表格中的部分数据，放到了 table 组件中来显示
        sliceTable() {
            return this.tableData.slice(this.startIndex, this.startIndex + 9)
        }
    },
    filters: {
        filtersTable(v) {
            return JSON.stringify(v)
        }
    },
    mounted() {
        this.getCategory()
        this.getProductList()
        this.getUserList()
    },
    methods: {
        addUserByList() {
            this.userModelVisible = true
            // 创建一个空元素，这个空元素用来撑开 table 的高度，模拟所有数据的高度

            this.$nextTick(() => {
                console.log(this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper'))
                this.$refs.tableRef.$el
                    .querySelector('.el-table__body-wrapper')
                    .addEventListener('scroll', this.tableScroll, {
                        passive: true
                    })
                // 创建一个空元素，这个空元素用来撑开 table 的高度，模拟所有数据的高度
                this.vEle = document.createElement('div')
                this.loadData()
            })
        },
        // 加载数据
        loadData() {
            const start_i = this.tableData.length
            for (let i = start_i; i < start_i + 50; i++) {
                this.tableData.push({
                    id: i,
                    name: 'zhangsan' + i,
                    age: 12,
                    address: 'china'
                })
            }
            this.$nextTick(() => {
                // 设置成绝对定位，这个元素需要我们去控制滚动
                this.$refs.tableRef.$el.querySelector('.el-table__body').style.position = 'absolute'
                // 计算表格所有数据所占内容的高度
                this.vEle.style.height = this.tableData.length * 48 + 'px'
                // 把这个节点加到表格中去，用它来撑开表格的高度
                this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper').appendChild(this.vEle)
                // 重新设置曾经被选中的数据
                this.selectedRows.forEach(row => {
                    this.$refs.tableRef.toggleRowSelection(row, true)
                })
            })
        },
        /**
     * @description: 手动勾选时的事件
     * @param {*} selection - 选中的所有数据
     * @param {*} row - 当前选中的数据
     * @return {*}
     */
        handleSelect(selection, row) {
            this.selectedRows = selection
        },
        /**
     * @description: 全选事件
     * @param {*} selection
     * @return {*}
     */
        handleSelectAll(selection) {
            this.isSelectedAll = !this.isSelectedAll
            if (this.isSelectedAll) {
                this.selectedRows = this.tableData
            } else {
                this.selectedRows = []
                this.$refs.tableRef.clearSelection()
            }
        },
        /**
     * @description: table 滚动事件
     * @param {*}
     * @return {*}
     */
        tableScroll() {
            const bodyWrapperEle = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper')
            // 滚动的高度
            const scrollTop = bodyWrapperEle.scrollTop
            // 下一次开始的索引
            this.startIndex = Math.floor(scrollTop / 48)
            // 滚动操作
            bodyWrapperEle.querySelector('.el-table__body').style.transform = `translateY(${this.startIndex * 48}px)`
            // 滚动操作后，上面的一些 tr 没有了，所以需要重新设置曾经被选中的数据
            this.selectedRows.forEach(row => {
                this.$refs.tableRef.toggleRowSelection(row, true)
            })

            // 滚动到底，加载新数据
            if (bodyWrapperEle.scrollHeight <= scrollTop + bodyWrapperEle.clientHeight) {
                if (this.tableData.length == 50) {
                    this.$message.warning('没有更多了')
                    return
                }
                this.loadData()
            }
        },
        reset() {
            // this.getCategory()
            this.productvalue = []
        },

        /**
     * @description: 删除选中列表的某一个
     * @param {Object} tag
     */
        handleClose(tag) {
            // console.log(tag)
            const index = this.userTableData.findIndex(_item => {
                return _item.id == tag.id
            })
            // console.log(index)
            this.$nextTick(() => {
                this.$refs.multipleSelectionTwo.toggleRowSelection(this.userTableData[index], false)
            })
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
            // console.log(this.dynamicTags)
        },
        /**
     * @description: 点击查看
     * @param {Number} index 索引
     */
        toView(index) {
            // console.log(index)
            // console.log(this.ProductSetGetAllList[index])
            this.relevantPersonnelFour = true
            this.staffList = this.ProductSetGetAllList[index].users
        },
        /**
     * @description: 获取人员数据
     */
        async getUserList() {
            try {
                const result = await User.UserGetAllUserAsync()
                if (result.success) {
                    // console.log(result.data)
                    this.userTableData = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 获取产品数据
     */
        async getProductList() {
            try {
                const result = await Product.ProInsertAsync()
                if (result.success) {
                    // console.log(result.data)
                    this.productList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 删除弹出框
     * @param {Number} index 索引值
     * @param {Object} _modalInfo 删除弹出框信息
     */
        onActionConfirm(index, _modalInfo) {
            this.$refs.CommonDialog.Show(_modalInfo.type, _modalInfo.tipInfo, _modalInfo.btnText, () => {
                this.$refs.CommonDialog.OnHandleCancel()
                this[_modalInfo.callBack](index)
            })
        },

        /**
     * @description: 获取所有数据
     */
        async getCategory() {
            this.ProductSetGetAllList = []
            const loading = this.$loading({
                lock: true,
                text: '数据加载中。。。',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })

            try {
                const result = await Product.ProductSetGetAllListAsync(this.productvalue)
                if (result.success) {
                    this.ProductSetGetAllList = result.data
                    loading.close()
                } else {
                    loading.close()
                    this.$message.error(result.message)
                }
            } catch (err) {
                loading.close()
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 删除某条数据
     * @param {String} _id id
     * @return {*}
     */
        async clickDelete(_id) {
            const uuid = _id
            try {
                const result = await Product.ProductSetDeleteAsync({ id: uuid })
                if (result.success) {
                    this.getCategory()
                    this.$message.success(result.message)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 点击添加数据
     */
        async onAdd() {
            // console.log(this.ProductListTwo, this.UserGetAllUser)
            if (this.UserGetAllUser.length > 0 && this.ProductListTwo.length > 0) {
                const userId = []
                for (const item of this.UserGetAllUser) {
                    userId.push(item.id)
                }
                const productvalue = []
                for (const item of this.ProductListTwo) {
                    productvalue.push(item.id)
                }
                const sss = {
                    productIds: productvalue,
                    userIds: userId
                }
                try {
                    const result = await Product.ProductSetInsertBatchAsync(sss)
                    if (result.success) {
                        this.getCategory()
                        this.multipleSelectionTwoCopy = []
                        this.multipleSelectionOneCopy = []
                        this.multipleSelectionThreeCopy = []
                        this.UserGetAllUser = []
                        this.ProductListTwo = []
                    } else {
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            } else {
                this.$message.error('请选择产品名称或相关人员')
            }
        },

        /**
     * @description: 编辑保存数据
     * @param {Number} index 索引
     */
        async Save(index) {
            // console.log('eeeeeeee')
            const arr = this.ProductSetGetAllList[index]
            // console.log(arr)
            const userId = []
            for (const item of arr.users) {
                userId.push(item.id)
            }
            const sss = {
                id: arr.id,
                productId: arr.productId,
                userIds: userId
            }
            // console.log(sss)
            try {
                const result = await Product.ProductSetUpdateAsync(sss)
                if (result.success) {
                    this.getCategory()
                    this.multipleSelectionTwoCopy = []
                    this.multipleSelectionOneCopy = []
                    this.UserGetAllUser = []
                    this.productvalue = []
                    this.Expansion = ''
                } else {
                    this.getCategory()
                    this.multipleSelectionTwoCopy = []
                    this.multipleSelectionOneCopy = []
                    this.UserGetAllUser = []
                    this.productvalue = []
                    this.Expansion = ''
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.getCategory()
                this.multipleSelectionTwoCopy = []
                this.multipleSelectionOneCopy = []
                this.UserGetAllUser = []
                this.productvalue = []
                this.Expansion = ''
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 打开所有产品数据弹出框
     */
        clickAddData() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.search = ''
            this.getProductList().then(() => {
                this.relevantPersonnelThree = true
                loading.close()
                if (this.ProductListTwo.length != 0) {
                    const data = this.ProductListTwo
                    data.forEach(element => {
                        const index = this.productList.findIndex(_item => {
                            return _item.id == element.id
                        })
                        this.$nextTick(() => {
                            this.$refs.multipleSelectionThree.toggleRowSelection(this.productList[index])
                        })
                    })
                }
            })
        },

        /**
     * @description: 勾选产品数据
     * @param {Array} _val 产品数据
     */
        handleSelectionChangeThree(_val) {
            this.multipleSelectionThreeCopy = _val
        },

        /**
     * @description: 产品数据弹出框 取消按钮
     */
        cancelThree() {
            this.$refs.multipleSelectionThree.clearSelection()
            this.relevantPersonnelThree = false
            this.multipleSelectionThreeCopy = []
        },

        /**
     * @description: 产品数据弹出框 确认按钮
     */
        confirmThree() {
            if (this.multipleSelectionThreeCopy.length != 0) {
                this.relevantPersonnelThree = false
                this.ProductListTwo = this.multipleSelectionThreeCopy
                this.$refs.multipleSelectionThree.clearSelection()
            } else {
                this.$message.error('请添加相关产品')
            }
        },

        /**
     * @description: 打开  添加相关人员弹出框
     */
        ClickAdd() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.search = ''
            this.getUserList().then(() => {
                this.relevantPersonnelOne = true
                loading.close()
                if (this.UserGetAllUser.length != 0) {
                    const data = this.UserGetAllUser
                    data.forEach(element => {
                        const index = this.userTableData.findIndex(_item => {
                            return _item.id == element.id
                        })
                        this.$nextTick(() => {
                            this.$refs.multipleSelectionOne.toggleRowSelection(this.userTableData[index])
                        })
                    })
                }
            })
        },

        /**
     * @description: 勾选添加相关人员
     * @param {Array} val 人员列表
     */
        handleSelectionChangeOne(val) {
            this.multipleSelectionOneCopy = val
        },

        /**
     * @description: 取消添加相关人员
     */
        cancelOne() {
            this.$refs.multipleSelectionOne.clearSelection()
            this.relevantPersonnelOne = false
            this.multipleSelectionOneCopy = []
        },

        /**
     * @description: 确认添加相关人员
     */
        confirmOne() {
            if (this.multipleSelectionOneCopy.length != 0) {
                this.relevantPersonnelOne = false
                this.UserGetAllUser = this.multipleSelectionOneCopy
                this.$refs.multipleSelectionOne.clearSelection()
            } else {
                this.$message.error('请添加相关人员')
            }
        },

        /**
     * @description: 打开  编辑相关人员弹出框
     * @param {Number} index 索引
     */
        clickBian(index) {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.search = ''
            this.getUserList().then(() => {
                loading.close()
                this.Expansion = index
                this.relevantPersonnelTwo = true
                const data = this.ProductSetGetAllList[index].users
                this.dynamicTags = this.ProductSetGetAllList[index].users
                data.forEach(element => {
                    const selectIndex = this.userTableData.findIndex(_item => {
                        return _item.id == element.id
                    })
                    this.$nextTick(() => {
                        this.$refs.multipleSelectionTwo.toggleRowSelection(this.userTableData[selectIndex])
                    })
                })
            })
        },

        /**
     * @description: 编辑相关人员
     * @param {Array} val 人员列表
     */
        handleSelectionChangeTwo(val) {
            this.multipleSelectionTwoCopy = val
            // console.log(val)
            this.dynamicTags = val
        },

        /**
     * @description: 取消编辑相关人员
     */
        cancelTwo() {
            this.$refs.multipleSelectionTwo.clearSelection()
            this.relevantPersonnelTwo = false
            this.multipleSelectionTwoCopy = []
        },

        /**
     * @description: 确认编辑相关人员
     */
        confirmTwo() {
            if (this.multipleSelectionTwoCopy.length != 0) {
                this.relevantPersonnelTwo = false
                this.ProductSetGetAllList[this.Expansion].users = this.multipleSelectionTwoCopy
                this.Save(this.Expansion)
                this.$refs.multipleSelectionTwo.clearSelection()
            } else {
                this.$message.error('请添加相关人员')
            }
        }
    }
}
</script>
<style scoped lang="less">
::v-deep .el-dialog__footer {
  height: 70px;
}
.buttonStyle {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.buttonStyles {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  margin-top: 0 !important;
}
.buttonStyleMin {
  padding: 5px 10px;
  color: #ffffff;
  background: #3579e0;
}
.relevantPerson {
  width: 100%;
  height: 405px;
  background: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0px 2px 20px 0px rgba(21, 32, 41, 0.22);
  border-radius: 5px;
  .relevantPersonInput {
    width: 270px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-top: 10px;
  }
  .sousuo {
    width: 100px;
    height: 40px;
    background: #3579e0;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .relevantPersonInputCen {
    width: 100%;
    height: 254px;
    background: #f7f7f7;
    border: 1px solid #dcdfe5;
    opacity: 0.7;
    border: 1px solid #000;
    border-radius: 5px;
    overflow-y: auto;
  }
  .relevantPersonInputBot {
    button {
      width: 138px;
      height: 30px;
      background: #ffffff;
      border: 1px solid #bfbfbf;
      border-radius: 15px;
      margin-top: 20px;
    }
    .relevantPersonCan {
      margin-left: 220px;
    }
    .relevantPersonCon {
      margin-left: 30px;
      color: #ffffff;
      background: #3579e0;
    }
  }
}
.container {
  height: 815px;
  margin: 30px;
  background: #ffffff;
  border: 1px solid #dcdfe4;
  box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
  border-radius: 5px;
  padding: 30px;
  .containerName {
    border-bottom: 1px solid #c8cdd5;
    padding-bottom: 10px;
    p {
      display: inline-block;
    }
    .productName {
      margin-left: 30px;
      float: left;
    }
    .personnel {
      margin-left: 400px;
      float: left;
    }
    .dataStatisticsButton {
      float: right;
      margin-right: 10px;
    }
  }
  .addData {
    border-bottom: 1px solid #c8cdd5;
    height: 180px;
    .addDataLeft {
      width: 90%;
      height: 162px;
      background: #ffffff;
      border: 1px solid #dcdfe5;
      border-radius: 5px;
      display: inline-block;
      vertical-align: top;
      margin-top: 10px;
      .addDataLeftList {
        width: 90%;
        height: 106px;
        background: #f7f7f7;
        border: 1px solid #dcdfe5;
        border-radius: 5px;
        overflow-y: auto;
        margin-top: 45px;
        font-size: 14px;
        margin-left: 5%;
        span {
          margin-left: 7px;
          display: inline-block;
        }
      }
    }
    .addDataCenter {
      width: 90%;
      height: 162px;
      background: #ffffff;
      border: 1px solid #dcdfe5;
      border-radius: 5px;
      display: inline-block;
      vertical-align: top;
      margin-top: 10px;
      .toplie {
        width: 90%;
        height: 106px;
        background: #f7f7f7;
        border: 1px solid #dcdfe5;
        border-radius: 5px;
        overflow-y: auto;
        margin-top: 45px;
        font-size: 14px;
        margin-left: 6%;
        p {
          border-radius: 30px;
          display: inline-block;
          margin-left: 2px;
        }
      }
    }
  }
  .containerButtom {
    height: 580px;
    padding: 10px 0;
    overflow-y: auto;
    background-color: white;
    overflow-x: hidden;
    .containerButtomList {
      height: 180px;
      line-height: 30px;
      position: relative;
      border-bottom: 1px solid #c8cdd5;
    }
    .el-input {
      width: 90%;
    }
    .containerButtomListCenter {
      width: 90%;
      height: 162px;
      background: #ffffff;
      border: 1px solid #dcdfe5;
      border-radius: 5px;
      display: inline-block;
      vertical-align: top;
      padding: 20px;
      box-sizing: border-box;
      margin-top: 10px;
      overflow: auto;
      p {
        border-radius: 30px;
        display: inline-block;
        margin-left: 2px;
      }
    }
  }
  .el-button {
    float: right;
    margin-right: 10px;
    //   margin-top: 10px;
  }
  .el-select {
    width: 60%;
  }
}
::v-deep .el-table__body-wrapper {
    overflow-y: auto;
}
</style>
